<template>
  <view class="exam-paper" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    
    <swiper
      class="exam-swiper"
      :duration="config.swiperDuration"
      :current="examIndex"
      :disable-touch="true"
      @change="onChange"
    >
      <swiper-item v-for="(item, index) in examData" :key="index">
        <!-- 当前页与前后两页渲染卷面试题内容，其他页不渲染以节约资源提升性能 -->
        <exam-paper-item
          v-if="Math.abs(examIndex - index) <= 1"
          :idx="index"
          :cur-item="item"
          :examPaperId="examPaperId"
          @prev="prev"
          @next="next"
        ></exam-paper-item>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import config from '@/uni_modules/sv-exam-plus/config.js'
import ExamPaperItem from './exam-paper-item.vue'
import store from '@/uni_modules/sv-exam-plus/store/index.js'

export default {
  components: {
    ExamPaperItem
  },
  props: {
    // 当前题目
    paper: {
      type: Object,
      default: () => {}
    },
    examPaperId: {
      type: Number
    }
  },
  data() {
    return {
      config, // 兼容写法，需要先声明否则报错
      currentQuestionId:'',
      flashEnabled: true // 是否需要闪回策略
    }
  },
  // #ifdef VUE2
  model: {
    prop: 'paper',
    event: 'update:paper'
  },
  // #endif
  computed: {
    examData: {
      set(newData) {
        store.commit('updateData', newData)
      },
      get() {
        return store.state.examData
      }
    },
    examIndex: {
      set(newIndex) {
        store.commit('updateIndex', newIndex)
      },
      get() {
        return store.state.examIndex
      }
    },
    curPaper() {
      return store.state.examData[this.examIndex]
    },
    count: {
      set(count) {
        store.commit('updateCount', count)
      },
      get() {
        return store.state.count
      }
    },
    disabledTouch() {
      const hasStatus = this.curPaper.statusBtn !== '' && this.curPaper.statusBtn !== null && this.curPaper.statusBtn !== undefined ;
      console.log(hasStatus,this.curPaper.statusBtn,'是否显示');
      return !this.curPaper.submitted || !hasStatus;
    }
  },
  watch: {
    paper: {
      handler(newPaper) {
        store.commit('updateIndex', newPaper?.index || 0)
      },
      immediate: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.paper,'答题进度');
      store.commit('updateIndex', this.paper?.index || 0)
      // 监听开始答题默认进度
      uni.$once('sv-exam-start', (index) => {
        console.log(index,'方法sv-exam-start');
        store.commit('updateIndex', index || 0)
      })
    },
  
    onChange(e) {
      if (this.flashEnabled) {
        this.flashcardList = []
        this.examData.forEach((item) => {
          if (!item.flashCount) {
            item.flashCount = 0
          }
          item.flashCount++
        })
      }
      this.$emit('update:paper', { data: this.curPaper, index: e.detail.current })
    },
    prev() {
      const curIndex = this.examIndex <= 0 ? 0 : this.examIndex - 1
      store.commit('updateIndex', curIndex)
    },
    next() {
      this.flashcardList = this.examData.filter(item => item.flashCount >= item.dueIndex && item.dueIndex > 0)
      if (this.flashcardList && this.flashcardList.length > 0) {
        this.handleFlash()
        return
      }
      if (this.isFlashing) {
        this.isFlashing = false;
        store.commit('updateIndex', this.stashIndex)
      }
      let curIndex = this.examIndex >= this.total - 1 ? this.total - 1 : this.examIndex + 1;
      store.commit('updateIndex', curIndex)
    },
    handleFlash() {
      const flashcard = this.flashcardList.shift()
      flashcard.flashCount = 0
      // TODO 是否需要拷贝一份，以避免修改原有答题状态？
      // 修改提交状态
      console.log(flashcard)
      flashcard.submitted = false;
      this.flashIndex = this.examData.findIndex(item => item.questionId === flashcard.questionId)
      // 记录当前处于闪回状态，闪回题结束需要跳回原有的题号
      this.isFlashing = true;
      this.stashIndex =  this.stashIndex ? this.stashIndex : this.examIndex;
      store.commit('updateIndex', this.flashIndex)
    },

    handleTouchStart(event) {
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
    },
    handleTouchMove(event) {
      // 移动时更新结束位置
      this.endX = event.touches[0].pageX;
      this.endY = event.touches[0].pageY;
    },
    handleTouchEnd(event) {
      const {submitted, statusBtn} = this.curPaper
      if (this.endX - this.startX > 50) {
        if (submitted && statusBtn) {
          this.prev()
        }
        //向右滑动
      } else if (this.endX - this.startX < -50) {
        if (submitted && statusBtn) {
          this.next()
        }
        //向左滑动
      }
    }
  }
}
</script>

<style lang="scss">
.exam-paper {
  width: 100%;
  height: calc(100% - #{var(--card-header-height)});
  font-size: 16px;

  .exam-swiper {
    height: 100%;
  }
}
</style>
